import React, { useState, useEffect } from 'react';
import ApprovePageIndex from '@/components/ApprovePage';
import BasicInfo from '@/components/ApprovePage/BasicInfo';
import ArrangeVersion from '@/components/ApprovePage/ArrangeVersion';
import Explain from '@/components/ApprovePage/Explain';
import FilePage from '@/components/ApprovePage/FilePage';
import * as api from '@/services/ReturnMoneyPlanMgr';
import _ from 'lodash';
import { message } from 'antd';
import SubComponentsOne from './components/SubComponentsOne';
import SubComponentsTow from './components/SubComponentsTow';
import SubComponentsThree from './components/SubComponentsThree';

// 回款计划审批
export default function Index(props) {
  const { action, id, projectId, taskId } = props.location.query;
  const [submitLoading, setSubmitLoading] = useState(false);
  const [loading, setLoading] = useState(false);
  const [approvalData, setApprovalData] = useState({});

  useEffect(() => {
    setLoading(true);
    const params = {
      approvalId: id || '', // 审批单id
      projectId: projectId || '', // 项目id
    };
    api.approvalPreviewPCUsingGET({ params }).then(res => {
      if (res && res.code === 1 && !_.isEmpty(res.data)) {
        const fileList = [];
        _.forEach(res.data.files, item => {
          fileList.push({
            uid: item.fileId,
            name: item.fileName,
            filePath: item.filePath,
            previewUrl: item.previewUrl,
          });
        });
        res.data.files = fileList;
        setApprovalData(res.data);
        setLoading(false);
      }
    });
  }, []);

  // 点击跳转编排版本
  const handleJump = () => {
    window.open(`${window.location.origin}/#/OperatingPlan/ReturnMoneyPlan`);
  };
  // 要点说明
  const handleExplain = ev => {
    setApprovalData({
      ...approvalData,
      description: ev.target.value,
    });
  };
  // 附件
  const handleFile = file => {
    setApprovalData({
      ...approvalData,
      files: file,
    });
  };
  // 提交审批
  function handleSubmitApprove() {
    setSubmitLoading(true);
    // 是否有审批要点说明
    const isDescription = _.isEmpty(approvalData.description);
    if (isDescription) {
      message.warning('请填写审批要点说明');
      setSubmitLoading(false);
      return;
    }
    const files = [];
    _.forEach(approvalData.files, item => {
      files.push(item.uid);
    });
    api
      .approvalSubmitUsingPOST({
        data: {
          approvalId: id || '', // 审批单id
          projectId: projectId || '', // 项目id
          description: approvalData.description,
          files,
          versionIdList: approvalData.versionIdList,
        },
      })
      .then(res => {
        if (res && res.code === 1 && !_.isEmpty(res.data)) {
          window.location.href = `${res.data}`;
        }
        setSubmitLoading(false);
      });
  }
  return (
    <ApprovePageIndex
      action={action}
      taskId={taskId}
      loading={loading}
      approvalState={approvalData.state}
      title={`【回款计划审批】${approvalData.projectName}全周期回款计划审批`}
      instanceId={approvalData.instanceId}
      submit={{
        loading: submitLoading,
        onClick: handleSubmitApprove,
      }}
      url={`${window.location.origin}/#/OperatingPlan/ReturnMoneyPlan`}
      viewUrl={approvalData.reviewUrl}
    >
      {/* 基本信息 */}
      <BasicInfo
        data={{
          projectName: approvalData.projectName,
          projectCode: approvalData.projectCode,
          projectArea: approvalData.regionName,
          equityRatio: approvalData.equityRatio,
        }}
      />
      {/* 本次编排版本 */}
      <ArrangeVersion handleJump={handleJump} data={approvalData.editedVersionList} />
      {/* 区域年度回款目标 */}
      <SubComponentsOne data={approvalData.regionYearTargetVoList} />
      {/* 项目全盘年度回款指标 */}
      <SubComponentsTow data={approvalData.projectYearTargetVoList} />
      {/* 回款系数差异 */}
      <SubComponentsThree data={approvalData.coeffcienDifferenceVoList} />
      {/* 审批要点说明 */}
      <Explain isEdit={action} handleExplain={handleExplain} value={approvalData.description} />
      {/* 附件 */}
      <FilePage isEdit={action} handleFile={handleFile} fileList={approvalData.files} />
    </ApprovePageIndex>
  );
}
